<#import "/admin/_layout.html" as layout>
<@layout.header "订单详情">
</@layout.header>
<@layout.body>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-left">
                        <li class="breadcrumb-item"><a href="#">订单</a></li>
                        <li class="breadcrumb-item active">详情</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <!-- Main content -->
                    <div class="invoice p-3 mb-3">
                        <div class="row invoice-info">
                            <div class="col-sm-4 invoice-col">
                                <strong>订单信息</strong>
                                <address>
                                    订单编号:${(orderDetail.orderSn)!}<br>
                                    购买用户:${(orderDetail.nickName)!}<br>
                                    订单金额: ￥${(orderDetail.orderAmount)!}<br>
                                    邮费: ￥${(orderDetail.postageAmount)!}<br>
                                    支付金额:￥${(orderDetail.payAmount)!}<br>
                                    支付方式:${(orderDetail.payType)!}<br>
                                </address>
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-4 invoice-col">
                                <strong>收货信息</strong>
                                <address>
                                    收件人:${(orderDetail.consigneeUsername)!}<br>
                                    收件人电话:${(orderDetail.consigneeMobile)!}<br>
                                    详细地址:${(orderDetail.consigneeAddrDetail)!}<br>
                                </address>
                            </div>

                            <div class="col-sm-4 invoice-col">
                                <strong>发票信息</strong>
                                <address>
                                    类型:<br>
                                    发票抬头:<br>
                                    纳税人识别号:<br>
                                    内容:<br>
                                </address>
                            </div>

                        </div>
                        <!-- /.row -->

                        <!-- Table row -->
                        <div class="row">
                            <div class="col-12 table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>商品</th>
                                        <th>数量</th>
                                        <th>规格</th>
                                        <th>单价</th>
                                        <th>总价</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <#list orderDetail.orderItemList as item>
                                        <tr>
                                            <td>${item.productTitle}</td>
                                            <td>${item.productCount}</td>
                                            <td>${(item.sku)!}</td>
                                            <td>${item.price}</td>
                                            <td>${item.productCount * item.price}</td>
                                        </tr>
                                    </#list>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->

                        <div class="row">
                            <!-- accepted payments column -->
                            <div class="col-6">
                                <p class="lead">买家留言:</p>
                                <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
                                    ${(orderDetail.buyerMsg)!}
                                </p>
                                <p class="lead">卖家备注:</p>
                                <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
                                    ${(orderDetail.remarks)!}
                                </p>
                            </div>
                            <!-- /.col -->
                            <div class="col-6">
                                <p class="lead">订单状态</p>

                                <div class="table-responsive">
                                    <table class="table">
                                        <tr>
                                            <th style="width:50%">支付状态:</th>
                                            <td>
                                                <#if orderDetail.payStatus==1>
                                                    已支付
                                                <#elseif orderDetail.payStatus==0>
                                                    未支付
                                                </#if>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>发货状态</th>
                                            <td>
                                                <#if (orderDetail.deliveryStatus!)==1>待发货</#if>
                                                <#if (orderDetail.deliveryStatus!)==2>已发货</#if>
                                                <#if (orderDetail.deliveryStatus!)==4>已确认收货</#if>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>交易状态</th>
                                            <td>
                                                <#if orderDetail.tradeStatus==1>交易中</#if>
                                                <#if orderDetail.tradeStatus==2>交易完成</#if>
                                                <#if orderDetail.tradeStatus==3>已取消</#if>
                                                <#if orderDetail.tradeStatus==8>交易结束</#if>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->

                        <!-- this row will not appear when printing -->
                        <div class="row no-print">
                            <div class="col-12">
                                <button id="changePrice" type="button" class="btn btn-success float-right">
                                    修改价格
                                </button>
                                <button id="addRemarks" type="button" class="btn btn-primary float-right" style="margin-right: 5px;">
                                    添加备注
                                </button>
                                <button id="deliveryOrder" type="button" class="btn btn-primary float-right" style="margin-right: 5px;">
                                    发货
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- /.invoice -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>

</@layout.body>
<@layout.script>
    <script type="text/javascript">
        $("#addRemarks").click(function () {
            var orderId = ${orderDetail.id};
            layer.open({
                type: 2,
                title: '订单备注',
                anim: 2,
                shadeClose: true,
                shade: 0.6,
                area: ['70%', '70%'],
                content: '/admin/order/remarks/?orderId=' + orderId,
                end: function () {
                    location.reload();
                }
            });
        })
        $("#changePrice").click(function () {
            var orderId = ${orderDetail.id};
            layer.open({
                type: 2,
                title: '修改价格',
                anim: 2,
                shadeClose: true,
                shade: 0.6,
                area: ['70%', '70%'],
                content: '/admin/order/changePrice/?orderId=' + orderId,
                end: function () {
                    location.reload();
                }
            });
        })

        $("#deliveryOrder").click(function () {
            var orderId = ${orderDetail.id};
            layer.open({
                type: 2,
                title: '发货',
                anim: 2,
                shadeClose: true,
                shade: 0.6,
                area: ['70%', '70%'],
                content: '/admin/order/delivery/?orderId=' + orderId,
                end: function () {
                    location.reload();
                }
            });
        })
    </script>
</@layout.script>